<!DOCTYPE html>
<html lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  <title>Manage orders</title>
	<link type="text/css" href="/style.css" rel="stylesheet">
	<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.min.css" />
</head>
<body>
<header>
	<nav>
		<div class="centered"><h1>Manage orders</h1></div>
	</nav>
</header>
<section>
{{#Err}}
<div class="error-bar">{{Err}}</div>
{{/Err}}
<div class="rounded centered"><!-- filter form -->
	<form action="/orders/filter" method="get">
	<div class="box_left">
	<fieldset>
	<legend><h2>Filter orders</h2></legend>
	<div>
		<span class="col1"><label for="status">Order status</label></span>
		<span class="col2">
		<input type="radio" name="status" value="new" {{#Query.isNew}}checked{{/Query.isNew}}><span>New</span></input>
		<input type="radio" name="status" value="accepted" {{#Query.isAccepted}}checked{{/Query.isAccepted}}><span>Accepted</span></input>
		<input type="radio" name="status" value="packed" {{#Query.isPacked}}checked{{/Query.isPacked}}><span>Packed</span></input>
		<input type="radio" name="status" value="cancelled" {{#Query.isCancelled}}checked{{/Query.isCancelled}}><span>Cancelled</span></input>
		</span>
	</div>
	<div>
		<span class="col1"><label for="ship_date">Expected ship date</label></span>
		<span class="col2"><input name="ship_date" type="text" value="{{Query.ship_date}}"></input>
			<span class="date-pick">&nbsp;&nbsp;&nbsp;&nbsp;</span>
		</span>
	</div>
	<div>
		<span class="col1"><label for="ship_time">Expected ship time</label></span>
		<span class="col2"><input name="ship_time" type="text" value="{{Query.ship_time}}"></input></span>
		<span>e.g. 17:00</span>
	</div>
	<div>
		<span class="col1"><label for="item_type">Multi/Single items</label></span>
		<span class="col2">
			<input type="radio" name="item_type" value="multi" {{#Query.isMulti}}checked{{/Query.isMulti}}><span>Multi</span></input>
			<input type="radio" name="item_type" value="single" {{#Query.isSingle}}checked{{/Query.isSingle}}><span>Single</span></input>
			<input type="radio" name="item_type" value="" {{#Query.bothItemType}}checked{{/Query.bothItemType}}><span>Both</span></input>
		</span>
	</div>
	<div>
		<span class="col1"><label for="sioc">SIOC</label>
		<span class="col2">
		<input type="radio" name="sioc" value="true" {{#Query.isSIOC}}checked{{/Query.isSIOC}}><span>SIOC</span></input>
		<input type="radio" name="sioc" value="false" {{#Query.nonSIOC}}checked{{/Query.nonSIOC}}><span>Non-SIOC</span></input>
		<input type="radio" name="sioc" value="" {{#Query.bothSIOC}}checked{{/Query.bothSIOC}}><span>Both</span></input>
		</span>
	</div>
	<div>
		<span class="col1"><label for="fast_track">Fast Track</label></span>
		<span class="col2"><input type="checkbox" name="fast_track" value="true" {{#Query.fast_track}}checked{{/Query.fast_track}}></input></span>
	</div>
	<div>
		<span class="col1"><label>&nbsp;</label></span>
		<span class="col2"><button class="submit-button green-button">Filter Orders</button></span>
	</div>
	<div>
		<span class="col1"><label>&nbsp;</label></span>
		<span class="col2 err-msg">
		<ul>
		{{#Errs}}
		<li>{{msg}}</li>
		{{/Errs}}
		</ul>
		</span>
	</div>
	</fieldset>
	</div>
	<div class="box_right top">
	<span class="indicator">&nbsp;&nbsp;&nbsp;&nbsp;</span>
	<fieldset>
	<legend><h2>Create a batch based on filters</h2></legend>
	<div>
		<span>All fitlers you used on the left will be applied when you create a batch. You can further refine the selection.</span>
	</div>
	<div>
		<ul>
			<li><input type="checkbox" name="gift_wrap" value="true" {{#Query.gift_wrap}}checked{{/Query.gift_wrap}}></input><label>Gift Wrap orders only</label></li>
			<li><input type="checkbox" name="hazmat" value="true" {{#Query.hazmat}}checked{{/Query.hazmat}}></input><label>Hazmat orders only</label></li>
		</ul>
	</div>
	<div>
		<label for="batch_size">Batch size</label><span class="col2">
		<input type="text" size="5" name="filter_batch_size" value="{{Query.filter_batch_size}}"></input>
		</span>
		<button class="submit-button silver-button">Create a batch</button>
	</div>
	</fieldset>
	</div>
	</form>
	<form action="/orders/ASIN" method="get">
	<div class="box_right">
	<fieldset>
	<legend><h2>Create a batch based on ASINs</h2></legend>
	<div>
		<label for="ASIN">ASIN</label><span class="col2">
		<input type="text" name="ASIN" size="11" value="{{Query.ASIN}}"></input></span>
		<span class="text-hit" title="click to select top product (TBD)">Use top ASIN</span>
	</div>
  <div>
		<label>Batch size</label>
		<span class="col2"><input type="text" name="ASIN_batch_size" size="5" value="{{Query.ASIN_batch_size}}"></input></span>
		<button class="submit-button silver-button">Create a batch</button>
	</div>
	</fieldset>
	</div>
	</form>
</div>
</section>
<section>
<div><!-- order list -->
<div class="page-top"><!-- pagination --></div>
{{#Item}}
	<div class="rounded action-box centered">
		<div class="order-level">
		<span>{{Attribute.1.Value}}</span>
		<h2>{{Attribute.0.Value}}</h2>
		<ul class="order-details">
		<li>
			<span class="info-title">Order number</span>
			<span class="info-data"><a href="#">{{Name}}</a></span>
		</li>
		</div>
	</div>
{{/Item}}
{{^Item}}
	<div class="no-item">Sorry, No orders found</div>
{{/Item}}
<div>
</div>
</section>
</body>
<script src="http://code.jquery.com/jquery-1.10.0.min.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.min.js"></script>
<script>
  $(function() {
    $("input[name='ship_date']" ).datepicker({dateFormat: "yy-mm-dd"});
		$(".date-pick").click(function(){ $("input[name='ship_date']").datepicker("show"); });
  });
  </script>
</html>
